<template>
  <div v-loading="loading">
    <div v-if="loading" style="text-align: center; padding: 50px">
      <el-icon class="is-loading" :size="40"><Loading /></el-icon>
      <div style="margin-top: 16px">加载会话数据中...</div>
    </div>

    <el-empty v-else-if="!sessionData || !sessionData.stats" description="暂无会话数据" />

    <div v-else>
      <el-descriptions title="会话信息" border :column="3">
        <el-descriptions-item label="会话ID">
          <el-tag>{{ sessionData.sessionId }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="网站">
          {{ sessionData.website?.name || '未知网站' }}
        </el-descriptions-item>
        <el-descriptions-item label="页面浏览量">
          {{ sessionData.stats.pageViews }} 页
        </el-descriptions-item>
        <el-descriptions-item label="会话时长">
          {{ sessionData.stats.duration }} 分钟
        </el-descriptions-item>
        <el-descriptions-item label="开始时间">
          {{ formatTime(sessionData.stats.startTime) }}
        </el-descriptions-item>
        <el-descriptions-item label="结束时间">
          {{ formatTime(sessionData.stats.endTime) }}
        </el-descriptions-item>
        <el-descriptions-item label="来源">
          {{ sessionData.stats.referrer || '直接访问' }}
        </el-descriptions-item>
        <el-descriptions-item label="设备/浏览器">
          {{ sessionData.stats.device || '未知设备' }} / {{ sessionData.stats.browser || '未知浏览器' }}
        </el-descriptions-item>
        <el-descriptions-item label="操作系统">
          {{ sessionData.stats.os || '未知系统' }}
        </el-descriptions-item>
      </el-descriptions>

      <!-- 访问页面时间线 -->
      <el-divider />
      <h4>访问页面</h4>
      <el-timeline>
        <el-timeline-item
          v-for="(page, index) in sessionData.pages"
          :key="index"
          :timestamp="formatTime(page.timestamp)"
          placement="top"
        >
          <el-card>
            <h4>{{ page.title || '未命名页面' }}</h4>
            <p style="color: #909399; font-size: 12px">{{ page.url }}</p>
            <el-tag v-if="page.duration" size="small" style="margin-top: 8px">
              停留时间: {{ page.duration }}秒
            </el-tag>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Loading } from '@element-plus/icons-vue'
import dayjs from 'dayjs'

interface Props {
  sessionData?: any
  loading?: boolean
}

const props = defineProps<Props>()

const formatTime = (time: string | Date) => {
  if (!time) return '-'
  return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
}
</script>

<style scoped lang="scss">
// 样式可以在这里添加
</style>

